﻿@model NewRen.Models.ViewModel.vProduct
@using NewRen.Models;
@{
    ViewBag.Title = "产品展示";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<link href="~/Styles/newren.product.css" rel="stylesheet" />

<script src="~/Scripts/jquery.jqzoom.js"></script>
<div class="container top30">
    <div class="left">
        <div>
            <div id="preview" class="spec-preview"> <span class="jqzoom"><img jqimg="@Model.Cover" src="@Model.Cover" /></span> </div>
            <!--缩图开始-->
            <div class="spec-scroll">
                <a class="prev">&lt;</a> <a class="next">&gt;</a>
                <div class="items">
                    <ul>
                        @foreach (var item in Model.Images)
                        {
                            <li><img alt="@Model.ProductName" bimg="@item.Path" src="@item.Path" onmousemove="preview(this);"></li>
                        }
                    </ul>
                </div>
            </div>
            <!--缩图结束-->
        </div>
    </div>
    <div class="left left-4">
        <div class="product-info">
            <div class="project-header clearfix">
                <span class="pro-time">
                    <span class="pro-time-inner">
                        剩余:@Model.RemainingTime
                        <span></span>
                    </span>
                </span>
                <div class="pro-title">
                    <p class="pro-title-detail">@Model.ProductName</p>
                </div>
            </div>
            <div class="project-price-box">
                <span class="pbox-price">@Model.Integration 积分</span>
                <span class="pbox-market">¥<del>@Model.Price</del></span>
            </div>
            <div class="project-attr-box">
                <p class="inline"><span class="pro-attr">商家：</span> <a href="/Business/BusinessShow/@Model.ID">@Model.BusinessName</a> </p>
                <p class="inline"><span class="pro-attr"> 产品描述：</span>@Model.Description</p>
                <p class="inline"><span class="pro-attr">活动时间：</span> @Model.Begin.ToShortDateString() - @Model.End.ToShortDateString()</p>
                <p class="inline"><span class="pro-attr">状态：</span>@CommonEnums.ProductStatuDisply[(int)Model.Statu]</p>
            </div>
            <div class="project-button-box">
                @if (Model.Statu == ProductStatu.Running)
                {
                    using (Html.BeginForm("Exchange", "Product", FormMethod.Post, new { id = "frmExchange" }))
                    {
                        @Html.AntiForgeryToken()
                        <input type="hidden" value="@Model.ID" name="ID" />
                        <input type="hidden" name="UserID" value="@((ViewBag.CurrentUser!=null && ViewBag.CurrentUser.UserType==UserType.User)?ViewBag.CurrentUser.ID:"")" id="userid" />
                        <input type="submit" name="exchange" class="button pro-exchange" value="兑换" />
                    }

                }
            </div>
        </div>
    </div>
    <div class="clr"></div>
</div>

<script>
    function tabs(tabId, tabNum) {
        //设置点击后的切换样式
        $(tabId + " .tab li").removeClass("curr");
        $(tabId + " .tab li").eq(tabNum).addClass("curr");
        //根据参数决定显示内容
        $(tabId + " .tabcon").hide();
        $(tabId + " .tabcon").eq(tabNum).show();
    }
    //=====================全局函数========================

    //==================图片详细页函数=====================
    //鼠标经过预览图片函数
    function preview(img) {
        $("#preview .jqzoom img").attr("src", $(img).attr("src"));
        $("#preview .jqzoom img").attr("jqimg", $(img).attr("bimg"));
    }

    //图片放大镜效果
    $(function () {
        $(".jqzoom").jqueryzoom({ xzoom: 200, yzoom: 200 });
    });


    //图片预览小图移动效果,页面加载时触发
    $(function () {
        var tempLength = 0; //临时变量,当前移动的长度
        var viewNum = 5; //设置每次显示图片的个数量
        var moveNum = 2; //每次移动的数量
        var moveTime = 300; //移动速度,毫秒
        var scrollDiv = $(".spec-scroll .items ul"); //进行移动动画的容器
        var scrollItems = $(".spec-scroll .items ul li"); //移动容器里的集合
        var moveLength = scrollItems.eq(0).width() * moveNum; //计算每次移动的长度
        var countLength = (scrollItems.length - viewNum) * scrollItems.eq(0).width(); //计算总长度,总个数*单个长度

        //下一张
        $(".spec-scroll .next").bind("click", function () {
            if (tempLength < countLength) {
                if ((countLength - tempLength) > moveLength) {
                    scrollDiv.animate({ left: "-=" + moveLength + "px" }, moveTime);
                    tempLength += moveLength;
                } else {
                    scrollDiv.animate({ left: "-=" + (countLength - tempLength) + "px" }, moveTime);
                    tempLength += (countLength - tempLength);
                }
            }
        });
        //上一张
        $(".spec-scroll .prev").bind("click", function () {
            if (tempLength > 0) {
                if (tempLength > moveLength) {
                    scrollDiv.animate({ left: "+=" + moveLength + "px" }, moveTime);
                    tempLength -= moveLength;
                } else {
                    scrollDiv.animate({ left: "+=" + tempLength + "px" }, moveTime);
                    tempLength = 0;
                }
            }
        });
    });

</script>